import { Progress } from 'antd'
import React from 'react'
import style from './index.module.scss'
type Props = {
    title?: string
    orderNum?: number | string
    color?: Record<string, string>
    percent?: number
    className?: string
}
const ProgressBarCard: React.FC<Props> = (props) => {
    const {
        title = "JNZX辣椒烘干机",
        orderNum = 2025022814,
        color = {
            '0%': '#fc6701',
            '100%': '#ff1713',
        },
        percent = 80,
        className
    } = props
    return (
        <div className={`progress-bar-card ${style["progress-bar-card"]} text-[12px] tracking-[2px] w-full${className ? " " + className : ""}`}>
            <div className='title-num flex justify-between'>
                <div className='title'>{title}</div>
                <div className='num'>{orderNum}</div>
            </div>
            <Progress percent={percent} status="active" percentPosition={{ align: 'center', type: 'inner' }} strokeColor={color} showInfo={true} strokeLinecap="butt" trailColor="#0a383d" size={{ height: 15 }} />
        </div>
    )
}

export default ProgressBarCard